<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="../lib/jquery.js"></script>
  <script>
    var textCount = {
      input:null,
      init:function(config){
        this.input = $(config.id);
        this.bind();
        //这边范围对应的对象，可以实现链式调用
        return this;
      },
      bind:function(){
        var self = this;
        this.input.on('keyup',function(){
          self.render();
        });
      },
      getNum:function(){
        return this.input.val().length;
      },
      //渲染元素
      render:function(){
        var num = this.getNum();
        if ($('#J_input_count').length == 0) {
          this.input.after('<span id="J_input_count"></span>');
        };
        $('#J_input_count').html(num+'个字');
      }
    }
    //另一种写法
    /**
    var TextCount = (function(){
      //私有方法，外面将访问不到
      var _bind = function(that){
        that.input.on('keyup',function(){
          that.render();
        });
      }
      var _getNum = function(that){
        return that.input.val().length;
      }
      var TextCountFun = function(config){
      }
      TextCountFun.prototype.init = function(config) {
        this.input = $(config.id);
        _bind(this);
        return this;
      };
      TextCountFun.prototype.render = function() {
        var num = _getNum(this);
        if ($('#J_input_count').length == 0) {
          this.input.after('<span id="J_input_count"></span>');
        };
        $('#J_input_count').html(num+'个字');
      };
      //返回构造函数
      return TextCountFun;
    })();
    **/
    $(function() {
      //在domready后调用
      textCount.init({id:'#J_input'}).render();
    })
  </script>
</head>
<body>
<input type="text" id="J_input"/>
</body>
</html>